<clr-modal [(clrModalOpen)]="opened"  [clrModalClosable]="false">
    <h3 class="modal-title">{{'APP_IMPORT_HOST'|translate}}</h3>
    <div class="modal-body modal-height">
        <form clrForm #itemForm="ngForm" enctype="multipart/form-data">
            <a style="color:#0000FF" (click)="download()">{{'APP_DOWNLOAD_TEMPLATE'|translate}}</a>
            <div style="display: inline-flex;">
                <clr-input-container class="clr-control-container clr-col-md-9">
                    <label class="clr-col-md-4">{{"APP_FILE"|translate}}</label>
                    <input class="clr-col-md-8" clrInput name="name"  placeholder="{{this.file?.name || 'APP_FILE_SELECTED_NOTHING' | translate}}" disabled/>
                </clr-input-container>
                <div style="margin-top: 1.2rem;" class="clr-col-md-3">
                    <label style="margin-left: 15px;" for="chart" class="btn btn-secondary btn-sm file-browser-btn">{{"APP_FILE_SELECT"|translate}}</label>
                    <input style="display: none;" class="file-input" type="file" id="chart" name="chart" ngModel (change)="upload($event)">
                </div>
            </div>
            <div *ngIf="errMsg!==''" class="alert alert-danger" role="alert">
                <div class="alert-items">
                    <div class="alert-item static">
                        <div class="alert-icon-wrapper">
                            <clr-icon class="alert-icon" shape="exclamation-circle"></clr-icon>
                        </div>
                        <span class="alert-text" style="white-space:pre-wrap;">
                            {{errMsg}}
                        </span>
                    </div>
                </div>
            </div>
        </form>
        <app-modal-alert></app-modal-alert>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-outline" (click)="onCancel()"
                [disabled]="isSubmitGoing">{{'APP_CANCEL'|translate}}</button>
        <button type="submit" class="btn btn-primary" (click)="onSubmit()"
            [disabled]="itemForm.invalid || file == null" [clrLoading]="isSubmitGoing">{{'APP_COMMIT'|translate}}
        </button>
    </div>
</clr-modal>